<template>
  <z-paging 
    ref="pagingRef" 
    v-model="bottomDataList" 
    @query="queryList"
    :auto-show-system-loading="false"
    :loading-more-enabled="false"
  >
    <template #top>
      <wd-navbar custom-class="navbar-custom" :bordered="false" fixed placeholder safeAreaInsetTop>
        <template #left>
          <view class="text-[36rpx] font-bold text-[#003309]">练习</view>
        </template>
      </wd-navbar>
      <view class="flex items-center justify-between flex-wrap px-[22rpx] box-border mt-[30rpx]">
        <view 
          class="w-[336rpx] h-[180rpx] rounded-[16rpx] flex items-center justify-center mb-[30rpx] relative overflow-hidden"
          v-for="(item, index) in topDataList"
          :key="index"
          @click="handleTopClick(item)"
        >
          <image 
            src="/src/static/images/bg1.png" 
            class="absolute top-0 left-0 w-full h-full" 
            mode="aspectFill"
          />
          <text class="relative z-10 text-[32rpx] font-bold color-[#003309]">{{ item.title }}</text>
        </view>
      </view>
      <wd-divider v-if="bottomDataList.length > 0" style="margin-top: 5rpx;margin-bottom: 35rpx;"></wd-divider>
    </template>

    <view class="flex items-center justify-between flex-wrap px-[22rpx] box-border">
      <view 
        class="px-[22rpx] box-border w-[336rpx] h-[180rpx] rounded-[16rpx] flex items-center justify-center mb-[30rpx] relative overflow-hidden"
        v-for="(item, index) in bottomDataList"
        :key="index"
        @click="handleBottomClick(item)"
      >
        <image 
          src="/src/static/images/bg2.png" 
          class="absolute top-0 left-0 w-full h-full" 
          mode="aspectFill"
        />
        <!-- 行高40 -->
        <text class="relative z-10 text-[32rpx] font-bold color-white leading-[50rpx]">{{ item.title }}</text>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
// @ts-ignore
import { paperList } from '@/api/exam.js'
import { useTokenStore } from '@/store/token'

defineOptions({
  name: 'Exercise',
})
definePage({
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'custom',
    navigationBarTitleText: '练习',
  },
})

const tokenStore = useTokenStore()
const pagingRef = ref(null)

// 页面显示时检查登录状态
onShow(() => {
  if (!tokenStore.hasLogin) {
    // uni.showToast({
    //   title: '请先登录',
    //   icon: 'none',
    //   duration: 1500,
    // })
    setTimeout(() => {
      uni.reLaunch({
        url: '/pages/login/index?redirect=/pages/exercise/index'
      })
    }, 500)
  }
})

const topDataList = ref([
  { title: '智能测试', url: '/pages-children/examQuestion/index?type=test' },
  { title: '每日10题', url: '/pages-children/examQuestion/index?type=everyday10' }, //直接跳到考试页面
  { title: '专项测试', url: '/pages-children/specialTest/index' },
  { title: '错题库', url: '/pages-children/wrongQuestionBank/index' },
])
// const bottomDataList = ref([
//   { title: '茶叶基础知识', url: '/pages-children/examStart/index?title=茶叶基础知识' },
//   { title: '中茶企业文化', url: '/pages-children/examStart/index?title=中茶企业文化' },
//   { title: '恩施硒茶知识', url: '/pages-children/examStart/index?title=恩施硒茶知识' },
// ])
const bottomDataList = ref([])

// 查询列表数据
const queryList = (pageNo, pageSize) => {
  paperList({
    scope: 2  //茶叶产品
  }).then(res => {
    console.log('bottomDataList res---', res)
    pagingRef.value.complete(res);
  }).catch(err => {
    pagingRef.value.complete(false);
  })
}

const handleTopClick = (item) => {
  if (item.type == 'wait') {
    return uni.showToast({
      title: '暂未开放',
      icon: 'none',
    })
  }
  uni.navigateTo({
    url: item.url,
  })
}

const handleBottomClick = (item) => {
  uni.navigateTo({
    url: `/pages-children/examStart/index?id=${item.id}`,
  })
}
</script>

<style>
page{
  background-color: #F1F1F1;
}
</style>

<style lang="scss" scoped>

</style>
